<template>

    <div class="warehouse">
        <div class="ku_num">
            <label>
                仓库管理
            </label>
            <div class="ku_search">

                <el-input v-model="input2" style="width: 240px;" placeholder="仓库名称/负责人/地址/类型" :prefix-icon="Search"
                    @keyup.enter="search()" />
                <el-button @click="search()">点击查询</el-button>

                <el-button plain @click="dialogFormVisibleAdd  = true">
                    新建仓库
                </el-button>
                <el-dialog v-model="dialogFormVisibleAdd " title="添加仓库" width="500">

                    <el-form :model="formsAdd">
                        <div class="text-box">
                            <label class="text-box01">添加图片</label>
                            <el-upload class="avatar-uploader" action="#" :show-file-list="false" :auto-upload="false"
                                :on-change="chooseImageFn">
                                <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                                <el-icon v-else class="avatar-uploader-icon">
                                    <Plus />
                                </el-icon>
                            </el-upload>
                        </div>

                        <el-form-item label="仓库名称" :label-width="formLabelWidth">
                            <el-input v-model="formsAdd.ku_name" autocomplete="off" />
                        </el-form-item>

                        <el-form-item label="仓库地址" :label-width="formLabelWidth">
                            <el-input v-model="formsAdd.site" autocomplete="off" />
                        </el-form-item>

                        <el-form-item label="仓库上限" :label-width="formLabelWidth">
                            <el-input v-model="formsAdd.ku_limit" autocomplete="off" />
                        </el-form-item>

                        <el-form-item label="仓库负责人" :label-width="formLabelWidth">
                            <el-input v-model="formsAdd.functionary" autocomplete="off" />
                        </el-form-item>

                        <el-form-item label="联系电话" :label-width="formLabelWidth">
                            <el-input v-model="formsAdd.phone" autocomplete="off" />
                        </el-form-item>

                        <el-form-item label="存储类型" :label-width="formLabelWidth">
                            <el-input v-model="formsAdd.type" autocomplete="off" />
                        </el-form-item>

                        <el-form-item label="创建的时间" :label-width="formLabelWidth">
                            <el-date-picker v-model="formsAdd.time" type="datetime" placeholder=""
                                :default-time="defaultTime" style="width: 330px; height: 35px" />
                        </el-form-item>

                    </el-form>
                    <template #footer>
                        <div class="dialog-footer">
                            <el-button @click="dialogFormVisibleAdd  = false">取消</el-button>
                            <el-button type="primary" @click="foot()">
                                确认
                            </el-button>
                        </div>
                    </template>

                </el-dialog>

            </div>

        </div>

    </div>

    <div class="warehouse-message" v-for="(item, index) in list" :key="item.id">
        <div class="left">
            <div>
                <img :src="item.imgs" alt="">
            </div>
        </div>
        <div class="right">
            <div class="right-top">
                <div class="right-top-left">
                    <p>{{ item.ku_name }}</p>
                    <p>{{ item.site }}</p>
                </div>
                <div class="right-top-right">
                    <router-link :to="{ path: '/warehouse', query: { id: item.id, name: item.ku_name } }">
                        <el-button class="btn">查看</el-button>
                    </router-link>
                    <el-button class="btn" @click="dialogFormVisible[index] = true">修改</el-button>

                    <el-dialog v-model="dialogFormVisible[index]" title="修改仓库信息" width="500">
                        <el-form :model="forms[index]">
                            <div class="text-box">
                                <label class="text-box01">添加图片</label>
                                <el-upload class="avatar-uploader" action="#" :show-file-list="false"
                                    :auto-upload="false" :on-change="chooseImageFn">
                                    <img v-if="imageUr2 " :src="imageUr2" class="avatar" />
                                    <el-icon v-else class="avatar-uploader-icon">
                                        <Plus />
                                    </el-icon>
                                </el-upload>
                            </div>

                            <el-form-item label="仓库名称" :label-width="formLabelWidth">
                                <el-input v-model="forms[index].ku_name" autocomplete="off" />
                            </el-form-item>

                            <el-form-item label="仓库地址" :label-width="formLabelWidth">
                                <el-input v-model="forms[index].site" autocomplete="off" />
                            </el-form-item>

                            <el-form-item label="仓库上限" :label-width="formLabelWidth">
                                <el-input v-model="forms[index].ku_limit" autocomplete="off" />
                            </el-form-item>

                            <el-form-item label="仓库负责人" :label-width="formLabelWidth">
                                <el-input v-model="forms[index].functionary" autocomplete="off" />
                            </el-form-item>

                            <el-form-item label="联系电话" :label-width="formLabelWidth">
                                <el-input v-model="forms[index].phone" autocomplete="off" />
                            </el-form-item>

                            <el-form-item label="存储类型" :label-width="formLabelWidth">
                                <el-input v-model="forms[index].type" autocomplete="off" />
                            </el-form-item>

                            <el-form-item label="创建的时间" :label-width="formLabelWidth">
                                <el-date-picker v-model="forms[index].time3" type="datetime" placeholder=""
                                    :default-time="defaultTime" style="width: 330px; height: 35px" />
                            </el-form-item>

                        </el-form>
                        <template #footer>
                            <div class="dialog-footer">
                                <el-button @click="dialogFormVisible[index] = false">取消</el-button>
                                <el-button type="primary" @click="textgetList(index)">
                                    确认
                                </el-button>
                            </div>
                        </template>

                    </el-dialog>
                </div>
            </div>
            <ul>
                <li>
                    <p class="list_name">仓库名：{{ item.ku_name }}</p>
                    <p>存储上限：{{ item.limit }}</p>
                </li>
                <li>
                    <p class="list_name">负责人:</p>
                    <p>{{ item.functionary }}</p>
                </li>
                <li>
                    <p class="list_name">负责人联系电话:</p>
                    <p>{{ item.Phone }}</p>
                </li>
                <li>
                    <p class="list_name">存储类型:</p>
                    <p>{{ item.type }}</p>
                </li>
                <li>
                    <p class="list_name">创建时间:</p>
                    <p>{{ item.time }}</p>
                </li>
            </ul>
        </div>
    </div>

    <div class="kong">

    </div>
</template>

<style lang="less" scoped>
@import "../assets/less/public.less";

.warehouse-message {
    width: 100%;
    height: 150px;
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    border-radius: 20px;
    background-color: #fff;

    .left {
        width: 100px;
        margin-left: 10px;
        border-radius: 10px;

        img {
            width: 130px;
            height: 130px;
            border-radius: 10px;
        }
    }

    .right {
        display: flex;
        justify-content: space-evenly;
        flex-direction: column;
        height: 150px;
        flex: 1;

        .right-top {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 40px;

            .right-top-right {
                margin-bottom: 20px;

                .btn {
                    width: 100px;
                    height: 40px;
                    border-radius: 10px;
                    margin-right: 10px;
                    cursor: pointer;
                }
            }

            p {
                font-size: 20px;
                font-weight: 600;
                margin-bottom: 10px;
            }
        }

        >ul {
            display: flex;
            padding: 0 40px;

            li {
                flex: 1;
            }

            .list_name {
                color: @bigbg;
            }
        }
    }
}

.el-upload .el-upload--text {
    width: 100%;
    height: 100%;
}


.text-box {
    display: flex;
    justify-content: center;
    align-items: center;

    .text-box01 {
        margin-left: 70px;
    }
}

.el-icon {
    font-size: 30px;
}

.avatar-uploader {
    width: 150px;
    height: 150px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
    border: 1px dashed #ccc;

    .el-upload .el-upload--text {
        width: 150px;
        height: 150px;
    }

    .avatar {
        width: 100%;
        height: 145px;
    }

    &:hover {
        border: 1px solid @bg;
    }
}

.demo-datetime-picker {
    display: flex;
    width: 100%;
    padding: 0;
    flex-wrap: wrap;
}

.demo-datetime-picker .block {
    padding: 30px 0;
    text-align: center;
    border-right: solid 1px var(--el-border-color);
    flex: 1;
}

.demo-datetime-picker .block:last-child {
    border-right: none;
}

.demo-datetime-picker .demonstration {
    display: block;
    color: var(--el-text-color-secondary);
    font-size: 14px;
    margin-bottom: 20px;
}


.kong {
    width: 100%;
    height: 60px;
}
</style>

<script lang="ts" setup>
import { onMounted, ref, reactive } from "vue";
import { kuListall, ku_search, imggetup, gettime, ku_add, ku_alter } from '../../api/index'
import { Search } from '@element-plus/icons-vue'
import api from '../../api/request'
import {getTimenow} from "../../api/request";
import { ElMessage } from "element-plus";

const defaultTime = new Date(2000, 1, 1, 12, 0, 0)
const dialogFormVisible = ref<any>();
const dialogFormVisibleAdd = ref(false);
const formLabelWidth = "100px";
const input2 = ref('')
const imageUrl = ref("");
const imageUr2 = ref();
const modifiUrl = ref<any>("");
const formsAdd = reactive<any>({
    ku_name: "",
    img: "",
    ku_limit: "",
    site: "",
    type: "",
    functionary: "",
    phone: "",
    time: "",
    updatedata: "",
    updatetime: "",
    delivery: false,
});
const forms = reactive<any>({
    ku_name: "",
    img: "",
    ku_limit: "",
    site: "",
    type: "",
    functionary: "",
    phone: "",
    time: "",
    updatedata: "",
    updatetime: "",
    delivery: false,
});
const textlist = reactive<any>({
    kid: "",
    ku_name: "",
    site: "",
    functionary: "",
    type: "",
    img: "",
    phone: "",
    time: "",
    updatedata: "",
    updatetime: "",
    ku_limit: ""
})
let list = ref<any>([])
type U = {
    ku_name: string;
    site: string;
    functionary: string;
    type: string;
    img: string;
    kid: number;
    phone: number;
    updatedata: string;
    updatetime: string;
    ku_limit: number;
    fid: number;
};
onMounted(() => {
    getList()
});


//库列表
const getList = async () => {
    await kuListall().
        then((res) => {
            let { code, result } = res
            if (code == 200) {
                // console.log(result);
                let arr = result.map((item: U) => {
                    return {
                        fid: item.fid,
                        kid: item.kid,
                        ku_name: item.ku_name,
                        site: item.site,
                        functionary: item.functionary,
                        type: item.type,
                        id: item.kid,
                        imgs:api.url +item.img,
                        img:  item.img,
                        Phone: item.phone,
                        time: item.updatedata.slice(0, 10),
                        tiem2: item.updatetime,
                        limit: item.ku_limit,
                    }
                })
                list.value = arr
                dialogFormVisible.value = new Array(arr.length).fill(false);
                for (let i = 0; i < list.value.length; i++) {
                    forms[i] = {
                        fid: list.value[i].fid,
                        kid: list.value[i].kid,
                        ku_name: list.value[i].ku_name,
                        site: list.value[i].site,
                        functionary: list.value[i].functionary,
                        type: list.value[i].type,
                        img: list.value[i].img,
                        imgs: list.value[i].imgs,
                        phone: list.value[i].Phone,
                        time: list.value[i].time,
                        time2: list.value[i].tiem2,
                        time3: list.value[i].time + list.value[i].tiem2,
                        ku_limit: list.value[i].limit
                    }
                    
                }
            } else {
                console.log('失败');
            }

        })
}
const search = async () => {
    let keyword = input2.value
    await ku_search({ keyword })
        .then((res) => {
            // console.log(res);
            let { code, result } = res
            if (code == 200) {
                let Arr = result.map((item: U) => {
                    return {
                        kid: item.kid,
                        ku_name: item.ku_name,
                        site: item.site,
                        functionary: item.functionary,
                        type: item.type,
                        id: item.kid,
                        imgs: api.url + item.img,
                        Phone: item.phone,
                        time: item.updatedata.slice(0, 10),
                        limit: item.ku_limit
                    }
                })
                list.value = Arr
            }
            ElMessage({
                message: '查询成功',
                type: 'success',
            })
        })
}
//点击新建
const foot = async () => {
    let {ku_name, ku_limit, site, type, functionary, phone, time, updatedata, updatetime, img } = formsAdd
    let time1 = gettime({ data: time })
    updatedata = time1.updatedata
    updatetime = time1.updatetime
    await ku_add({ ku_name, ku_limit, site, type, functionary, phone, updatedata, updatetime, img })
        .then((res) => {
            if (res.code == 200) {
                dialogFormVisibleAdd.value=false
                getTimenow('新建了一个库')
                ElMessage.success("新建成功");
            }else{
                ElMessage.error(res.msg)
            }
        })
    dialogFormVisible.value = false;
}
const chooseImageFn = async (file: any) => {
    if (file) {
        let fd = new FormData();
        fd.append("photo", file.raw);
        await imggetup(fd).then((res) => {
            if (res.code == 200) {
                forms.img = res.picUrl;
                imageUrl.value = api.url + res.picUrl;
                imageUr2.value =api.url + res.picUrl
                formsAdd.img = res.picUrl;
                modifiUrl.value = res.picUrl;
            } else {
                ElMessage.error(res.msg);
            }
        });
    }
}
const textgetList = async(index: any) => {
    dialogFormVisible.value[index] = false;
    let { fid,kid, ku_name, site, functionary, type, img, phone, time3, updatedata, updatetime, ku_limit } = forms[index];
    if( imageUr2.value){
        img=modifiUrl.value
    }
    let getkutime = gettime({ data: time3 })
    updatedata = getkutime.updatedata
    updatetime = getkutime.updatetime
    console.log(img);
      await ku_alter({ fid,kid, ku_name, site, functionary, type, img, phone, updatedata, updatetime, ku_limit })
      .then((res) => {
          if (res.code == 200) {
            getTimenow('修改了一个库')
              ElMessage.success("修改成功");
          } else {
              ElMessage.error(res.msg);
          }
      })
    getTabList()
}
// 获取表格数据

const getTabList = async () => {
    let { kid } = textlist;
    // console.log(kid);

    if (kid == undefined) {
        kid = "1";
    }
    //   await kuListall01({ kid }).then((res) => {
    //     if (res.code == 200) {
    //       let { result } = res;
    //       let arr = result.map((item: Item) => {
    //         return {
    //           id: item.id,
    //           name: item.name,
    //           units: item.units,
    //           money: item.money,
    //           amount: item.amount,
    //           type: item.type,
    //           img: api.url + item.img,
    //         };
    //       });

    //       tabLiset.value = arr;
    //     } else {
    //       ElMessage.error(res.msg);
    //     }
    //   });
};
// 修改库信息


</script>